<template>
  <div>
    <ContentNavigation />
    <div class="videoDiv">
      <video-player class="video-player vjs-custom-skin" ref="videoPlayerSon" :options="playerOptions" style="margin-bottom: 10px"/>
      <div class="videoTitleDiv"><h2>{{ videoData.videoTitle }}</h2></div>
      <div style="margin-top: 10px">
        <el-avatar :size="35" :src="videoData.users.usersPortrait" style="display: inline-block"/>
        <div style="display: inline-block;margin-left: 3px">
          {{ videoData.users.usersName }}
          <div class="el-icon-timer" style="display: inline-block;font-size: 10px">
            {{ videoData.videoCreatingTime }}
          </div>
          <div style="font-size: 10px;color:#475669;margin-bottom: 10px;">
            <div class="el-icon-collection" style="display: inline-block">
              {{ videoData.community.communityName }}
            </div>
            <div style="display: inline-block">
              <div v-if="videoData.videoType === 1">
                原创
              </div>
              <div v-else>
                转载于<a :href="videoData.videoReprintUrl">{{ videoData.videoReprintUrl }}</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Comment :users="users" :article-item="videoData" :comment-type="2" :comment-prop="commentProp" :comment-list-size-prop="commentListSizeProp"/>
    </div>
  </div>
</template>
<script>
//引入video样式
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import request from "../../../utils/request";
import ContentNavigation from "../../../components/contentNavigation";
import TimeDisposal from "../../../components/timeDisposal";
import Comment from "../../../components/comment";
//引入hls.js

export default {
  components: {ContentNavigation,TimeDisposal,Comment },
  data () {
    return {
      playerOptions: {
        /*autoplay: true,*/  // 如果为true,浏览器准备好时开始回放
        /*muted: true,*/     // 默认情况下将会消除任何音频。
        loop: false,      // 是否视频一结束就重新开始。
        preload: 'auto',  // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        poster: "",
        aspectRatio: '16:9',  // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true,  // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: "video/mp4",  // 类型
          src: ""             // url地址
        }],
        controlBar: {
          // 剩余时间
          remainingTimeDisplay: false,
          // 全屏按钮
          fullscreenToggle: true,
          // 当前时间
          currentTimeDisplay: true,
          // 声音控制键
          volumeControl: true,
          // 暂停和播放键
          playToggle: true,
          // 进度条
          progressControl: true
        }
      },
      videoId:0,
      users:{},
      videoData:{
          users:{
            usersPortrait:""
          },
          community:{
            communityName:""
          }
      },
      commentProp:[],
      commentListSizeProp:0
    }
  },
  methods:{
    initVideo(){
      request.get('/article/getVideoOnId/'+this.videoId).then((res=>{
        this.playerOptions.sources[0].src=res.videoData.videoSrc
        this.playerOptions.poster=res.videoData.videoPoster
        this.videoData=res.videoData
        document.title=this.videoData.videoTitle+" - 贴乎";
        console.log(this.videoData.videoCreatingTime)
        if (res.msg !== "此评论数量不够"){
          this.commentListSizeProp=res.commentMap.commentListSize
          this.commentProp=res.commentMap.commentAndReplyContent
        }
      }))
    },
  },
  created() {
    this.users=JSON.parse(localStorage.getItem("userData"))
    this.videoId=JSON.parse(this.$route.params.videoId)
  },
  mounted() {
    this.initVideo()
  }
}
</script>
<style scoped>
.videoTitleDiv{
  width:700px;
  word-break:break-all
}
.videoDiv{
  margin: 0 auto;
  max-width: 700px;
  margin-top: 70px;
}
a{
  text-decoration:none;
  color: #0080FF;
}
</style>